<template>
  <view>
    <view class="cart-container" v-if="goodsInfo.length > 0">
      <my-address />
      <!-- 购物车商品列表的标题区域 -->
      <view class="cart-title">
        <!-- 左侧的图标 -->
        <uni-icons type="shop" size="18"></uni-icons>
        <!-- 描述文本 -->
        <text class="cart-title-text">购物车</text>
      </view>

      <uni-swipe-action>
        <uni-swipe-action-item
          :right-options="options"
          @click="onClick(goods)"
          v-for="goods in goodsInfo"
          :key="goods.goods_id"
        >
          <my-goods :goods="goods">
            <template slot="radio">
              <radio
                class="radio"
                :checked="goods.goods_state"
                color="#C00000"
                @click.stop="updateState(goods.goods_id, !goods.goods_state)"
              />
            </template>

            <template #number>
              <view @click.stop="">
                <uni-number-box
                  :value="goods.goods_number"
                  :min="1"
                  @change.stop="changNum(goods.goods_id, $event)"
                />
              </view>
            </template>
          </my-goods>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <my-settle />
    </view>

    <view v-else class="empty-cart">
      <image class="empty-img" src="@/static/cart_empty@2x.png" />
      <text class="tip-text">空空如也~</text>
    </view>
  </view>
</template>

<script>
import tabBarBadge from '@/mixins/tabBar-badge'
import myGoods from '../../conponents/my-goods/my-goods.vue'
import { mapGetters, mapMutations } from 'vuex'
import MyAddress from '../../conponents/my-address/my-address.vue'
import MySettle from '../../conponents/my-settle/my-settle.vue'
export default {
  mixins: [tabBarBadge],
  components: { myGoods, MyAddress, MySettle },
  computed: {
    ...mapGetters('cart', ['goodsInfo'])
  },

  data () {
    return {
      options: [
        {
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }
      ]
    };
  },

  methods: {
    ...mapMutations('cart', ['updateGoodsNum', 'removeGoods']),

    onClick (goods) {
      this.removeGoods(goods)
      this.length--
    },


    changNum (goods_id, goods_number) {
      this.updateGoodsNum({ goods_id, goods_number })
    },

    updateState (goods_id, goods_state) {
      this.$store.commit('cart/updateGoodsState', { goods_id, goods_state })
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-container {
  padding-bottom: 50px;
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;
    .cart-title-text {
      margin-left: 10px;
    }
  }
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>